<template>
  <div class="film-info-container">
    <!-- 背景装饰元素 -->
    <div class="decoration-circle decoration-circle-1"></div>
    <div class="decoration-circle decoration-circle-2"></div>
    <div class="decoration-circle decoration-circle-3"></div>
    <!-- 搜索区域 -->
    <transition name="fade" appear>
      <el-card class="search-card" shadow="hover">
        <el-form :inline="true" class="form">
          <el-form-item label="电影名:">
            <el-input
              placeholder="请你输入搜索电影名"
              v-model="keyword"
              clearable
              prefix-icon="Search"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="default"
              :disabled="!keyword"
              @click="search"
              icon="Search"
            >
              搜索
            </el-button>
            <el-button
              type="info"
              size="default"
              @click="reset"
              icon="RefreshRight"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </transition>

    <!-- 操作按钮区域 -->
    <transition name="slide-fade" appear>
      <el-card class="action-card" shadow="hover">
        <div class="button-group">
          <el-button type="primary" size="default" @click="addUser" icon="Plus">
            上架电影
          </el-button>
          <el-button
            type="danger"
            size="default"
            :disabled="!selectIdArr.length"
            @click="deleteSelectUser"
            icon="Delete"
          >
            批量下架
          </el-button>
        </div>
      </el-card>
    </transition>
    <!-- 电影卡片区域 -->
    <transition name="slide-up" appear>
      <div class="film-grid">
        <el-card
          v-for="item in FilmArr"
          :key="item.id"
          @click="detail(item)"
          class="film-card"
          shadow="hover"
        >
          <template #header>
            <div class="film-header">
              <h3 class="film-title">{{ item.name }}</h3>
              <span class="film-duration">
                <el-icon><Timer /></el-icon>
                {{ item.movieLength }}分钟
              </span>
            </div>
          </template>
          <div class="film-content">
            <div class="film-poster-container">
              <img :src="item.photo" alt="电影海报" class="film-poster" />
              <div class="film-poster-overlay">
                <el-icon><View /></el-icon>
                <span>查看详情</span>
              </div>
            </div>
            <div class="film-info">
              <div class="film-director">
                <el-icon><User /></el-icon>
                <p class="text345">导演: {{ item.director }}</p>
              </div>
              <div class="film-actors">
                <el-icon><UserFilled /></el-icon>
                <p class="text345">
                  主演: {{ item.actors.substring(0, 12) }}...
                </p>
              </div>
            </div>
          </div>
          <template #footer>
            <div class="film-actions">
              <el-button
                size="small"
                type="primary"
                @click.stop="updateUser(item)"
                icon="Edit"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                v-if="item.isExist == 1"
                type="info"
                @click.stop="deleteUser(item.id)"
                icon="Remove"
              >
                下架
              </el-button>
              <el-button
                size="small"
                v-else
                type="success"
                @click.stop="updateFilmIsExist(item.id)"
                icon="Plus"
              >
                上架
              </el-button>
            </div>
          </template>
        </el-card>
      </div>
    </transition>
    <!-- 分页区域 -->
    <transition name="fade" appear>
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[15, 30, 60, 120]"
          :background="true"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="getHasUser"
          @size-change="handler"
        />
      </div>
    </transition>
    <!-- 抽屉结构:完成添加新的电影|更新已有的电影-->
    <el-drawer
      v-model="drawer"
      size="450px"
      :destroy-on-close="true"
      class="film-drawer"
    >
      <!-- 头部标题:将来文字内容应该动态的 -->
      <template #header>
        <div class="drawer-header">
          <el-icon class="header-icon"><VideoCamera /></el-icon>
          <h4>{{ userParams.id ? '更新电影' : '添加电影' }}</h4>
        </div>
      </template>
      <!-- 身体部分 -->
      <template #default>
        <el-form
          :model="userParams"
          :rules="rules"
          ref="formRef"
          class="film-form"
          label-position="top"
        >
          <el-form-item label="电影名:">
            <el-input
              v-model="userParams.name"
              placeholder="请输入电影名"
              prefix-icon="Film"
            ></el-input>
          </el-form-item>
          <el-form-item label="时长:">
            <el-input
              v-model="userParams.movieLength"
              placeholder="请输入电影时长"
              prefix-icon="Timer"
            ></el-input>
          </el-form-item>
          <el-form-item label="导演:">
            <el-input
              v-model="userParams.director"
              placeholder="请输入导演"
              prefix-icon="User"
            ></el-input>
          </el-form-item>
          <el-form-item label="主演:">
            <el-input
              v-model="userParams.actors"
              placeholder="请输入主演"
              prefix-icon="UserFilled"
            ></el-input>
          </el-form-item>
          <el-form-item label="电影简介:">
            <el-input
              type="textarea"
              :rows="3"
              v-model="userParams.intro"
              placeholder="请输入电影简介"
            ></el-input>
          </el-form-item>
          <el-form-item label="电影图片:">
            <el-input
              v-model="userParams.photo"
              placeholder="请输入电影图片"
              prefix-icon="Picture"
            ></el-input>

            <!-- upload组件属性:action图片上传路径书写/api,代理服务器不发送这次post请求  -->
            <div class="upload-container">
              <el-upload
                class="avatar-uploader"
                action="/api/admin/common/upload"
                :headers="token"
                :show-file-list="false"
                name="file"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <div class="poster-preview">
                  <img
                    v-if="userParams.photo"
                    :src="userParams.photo"
                    class="avatar"
                    alt="电影海报"
                  />
                  <div v-else class="upload-placeholder">
                    <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                    <span>点击上传海报</span>
                  </div>
                </div>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="电影类型:">
            <el-select v-model="userParams.type" placeholder="请选择电影类型">
              <el-option
                v-for="item in typeArr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="switch-group">
            <el-form-item label="是否热映:">
              <el-switch
                v-model="userParams.isHot"
                active-text="是"
                inactive-text="否"
                class="custom-switch"
              ></el-switch>
            </el-form-item>
            <el-form-item label="是否轮播图:">
              <el-switch
                v-model="userParams.isBanner"
                active-text="是"
                inactive-text="否"
                class="custom-switch"
              ></el-switch>
            </el-form-item>
          </div>
          <el-form-item label="电影价格:">
            <el-input-number
              v-model="userParams.price"
              placeholder="请输入电影价格"
              :precision="2"
              :step="0.1"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="drawer-footer">
          <el-button @click="cancel" icon="Close">取消</el-button>
          <el-button type="primary" @click="save" icon="Check">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- card结构: 展示电影的基本信息-->
    <el-dialog
      v-model="dialogFormVisible"
      @close="handleClose"
      title="电影基本信息"
      draggable
      width="700px"
      class="film-detail-dialog"
      :destroy-on-close="true"
    >
      <div class="film-detail-card">
        <div class="film-detail-header">
          <div class="film-title-section">
            <h2 class="film-name">{{ userParams.name }}</h2>
            <div class="film-duration">
              <el-icon><Timer /></el-icon>
              <span>{{ userParams.movieLength }}分钟</span>
            </div>
          </div>
        </div>

        <div class="film-detail-content">
          <div class="film-poster-section">
            <img
              :src="userParams.photo"
              alt="电影海报"
              class="film-detail-poster"
            />
            <div class="film-price">
              <span>￥{{ userParams.price }}</span>
            </div>
          </div>

          <div class="film-info-section">
            <div class="info-item">
              <div class="info-label">
                <el-icon><User /></el-icon>
                导演：
              </div>
              <div class="info-value">{{ userParams.director }}</div>
            </div>

            <div class="info-item">
              <div class="info-label">
                <el-icon><UserFilled /></el-icon>
                演员：
              </div>
              <div class="info-value">
                {{ userParams.actors.substr(0, 80) }}...
              </div>
            </div>

            <div class="info-item">
              <div class="info-label">
                <el-icon><InfoFilled /></el-icon>
                介绍：
              </div>
              <div class="info-value">
                {{ userParams.intro.substr(0, 80) }}...
              </div>
            </div>

            <div class="info-item">
              <div class="info-label">
                <el-icon><Calendar /></el-icon>
                上映时间：
              </div>
              <div class="info-value">{{ formatTime(userParams.time) }}</div>
            </div>

            <div class="info-item">
              <div class="info-label">
                <el-icon><Film /></el-icon>
                电影类型：
              </div>
              <div class="info-value">{{ userParams.type }}</div>
            </div>

            <div class="info-item">
              <div class="info-label">
                <el-icon><Star /></el-icon>
                电影热度：
              </div>
              <div class="info-value">{{ userParams.counts }}</div>
            </div>

            <div class="film-status-section">
              <div class="status-item">
                <span class="status-label">是否热门：</span>
                <el-switch
                  disabled
                  v-model="userParams.isHot"
                  class="custom-switch"
                />
              </div>

              <div class="status-item">
                <span class="status-label">是否上映：</span>
                <el-switch
                  disabled
                  v-model="userParams.isExist"
                  class="custom-switch"
                />
              </div>

              <div class="status-item">
                <span class="status-label">是否轮播图：</span>
                <el-switch
                  disabled
                  v-model="userParams.isBanner"
                  class="custom-switch"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="clear" icon="Close">取消</el-button>
          <el-button
            type="primary"
            @click="dialogFormVisible = false"
            icon="Check"
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import useLayOutSettingStore from '@/store/modules/setting'
import { ref, onMounted, nextTick, computed } from 'vue'

import qs from 'qs'
import { reqSelectUser } from '@/api/acl/user'
import type { User } from '@/api/acl/user/type'
import { ElMessage, UploadProps } from 'element-plus'
import {
  Timer,
  UserFilled,
  View,
  Calendar,
  Star,
  InfoFilled,
  Film,
  VideoCamera,
  Plus,
} from '@element-plus/icons-vue'

import {
  reqAddOrUpdateFilm,
  reqFilmInfo,
  reqRemoveMovie,
  RequpdateFilmIsExist,
} from '@/api/film'
import { FilmResponseData, Records } from '@/api/film/type.ts'
import user from '@/store/modules/user.ts'
import { formatTime, formatTimeStamp } from '@/util/time.ts'
//默认页码
let pageNo = ref<number>(1)
//一页展示几条数据
let pageSize = ref<number>(15)
//用户总个数
let total = ref<number>(0)
//存储全部用户的数组
let FilmArr = ref<Records>([])
//定义响应式数据控制抽屉的显示与隐藏
let drawer = ref<boolean>(false)

let dialogFormVisible = ref()
let typeArr = ref([
  { id: 1, name: '喜剧' },
  { id: 2, name: '动作' },
  { id: 3, name: '爱情' },
  { id: 4, name: '科幻' },
  { id: 5, name: '恐怖' },
  { id: 6, name: '剧情' },
  { id: 7, name: '犯罪' },
])
//收集电影信息的响应式数据
let userParams = ref<Film>({
  id: 0,
  actors: '',
  counts: 0,
  director: '',
  intro: '',
  isBanner: 0,
  isExist: 1,
  isHot: 0,
  movieLength: 0,
  name: '',
  photo: '',
  price: 0,
  time: '',
  type: '',
})
//准备一个数组存储批量删除的用户的ID
let selectIdArr = ref<User[]>([])

//获取form组件实例
let formRef = ref<any>()
//定义响应式数据:收集用户输入进来的关键字
let keyword = ref<string>('')

const token = ref({
  token: localStorage.getItem('TOKEN'),
})

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile,
) => {
  //response:即为当前这次上传图片post请求服务器返回的数据
  //收集上传图片的地址,添加一个新的品牌的时候带给服务器
  userParams.value.photo = response.data
  //图片上传成功,清除掉对应图片校验结果
  // formRef.value.clearValidate('logoUrl')
}
//上传图片组件->上传图片之前触发的钩子函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  //钩子是在图片上传成功之前触发,上传文件之前可以约束文件类型与大小
  //要求:上传文件格式png|jpg|gif 4M
  if (
    rawFile.type == 'image/png' ||
    rawFile.type == 'image/jpeg' ||
    rawFile.type == 'image/gif'
  ) {
    if (rawFile.size / 1024 / 1024 < 4) {
      return true
    } else {
      ElMessage({
        type: 'error',
        message: '上传文件大小小于4M',
      })
      return false
    }
  } else {
    ElMessage({
      type: 'error',
      message: '上传文件格式务必PNG|JPG|GIF',
    })
    return false
  }
}

//获取模板setting仓库
let settingStore = useLayOutSettingStore()
//组件挂载完毕
onMounted(() => {
  getHasUser()
})
//获取全部已有的用户信息
const getHasUser = async (pager = 1) => {
  //收集当前页码
  let data = qs.stringify({
    name: keyword.value,
    page: pageNo.value,
    pageSize: pageSize.value,
  })
  pageNo.value = pager
  let result: FilmResponseData = await reqFilmInfo(data)
  if (result.code == 1) {
    total.value = result.data.total
    FilmArr.value = result.data.records
    console.log(FilmArr.value)
  }
}
const detail = (it: Film) => {
  console.log(userParams.value)
  dialogFormVisible.value = true
  userParams.value = it
  userParams.value.isHot = it.isHot == 1
  userParams.value.isExist = it.isExist == 1
  userParams.value.isBanner = it.isBanner == 1
  console.log(userParams.value)
}
const handleClose = () => {
  userParams.value = {
    id: 0,
    actors: '',
    counts: 0,
    director: '',
    intro: '',
    isBanner: 0,
    isExist: 1,
    isHot: 0,
    movieLength: 0,
    name: '',
    photo: '',
    price: 0,
    time: '',
    type: '',
  }
}
const clear = () => {
  dialogFormVisible.value = false
  userParams.value = {
    id: 0,
    actors: '',
    counts: 0,
    director: '',
    intro: '',
    isBanner: 0,
    isExist: 1,
    isHot: 0,
    movieLength: 0,
    name: '',
    photo: '',
    price: 0,
    time: '',
    type: '',
  }
}
//分页器下拉菜单的自定义事件的回调
const handler = () => {
  getHasUser()
}
//添加用户按钮的回调
const addUser = () => {
  //抽屉显示出来
  drawer.value = true
  //清空数据
  userParams.value = {
    id: 0,
    actors: '',
    counts: 0,
    director: '',
    intro: '',
    isBanner: 0,
    isExist: 1,
    isHot: 0,
    movieLength: 0,
    name: '',
    photo: '',
    price: 0,
    time: '',
    type: '',
  }
  //清除上一次的错误的提示信息
  nextTick(() => {
    formRef.value.clearValidate('actors')
    formRef.value.clearValidate('counts')
    formRef.value.clearValidate('director')
    formRef.value.clearValidate('intro')
    formRef.value.clearValidate('isBanner')
    formRef.value.clearValidate('isExist')
    formRef.value.clearValidate('isHot')
    formRef.value.clearValidate('movieLength')
    formRef.value.clearValidate('name')
    formRef.value.clearValidate('photo')
    formRef.value.clearValidate('price')
    formRef.value.clearValidate('time')
    formRef.value.clearValidate('type')
  })
}
//更新已有的用户按钮的回调
//row:即为已有用户的账号信息
const updateUser = (row: Film) => {
  //抽屉显示出来
  drawer.value = true
  console.log(row)
  //存储收集已有的账号信息
  row.isHot = row.isHot == 1
  row.isBanner = row.isBanner == 1
  Object.assign(userParams.value, row)
  //清除上一次的错误的提示信息
  nextTick(() => {
    formRef.value.clearValidate('actors')
    formRef.value.clearValidate('counts')
    formRef.value.clearValidate('director')
    formRef.value.clearValidate('intro')
    formRef.value.clearValidate('isBanner')
    formRef.value.clearValidate('isExist')
    formRef.value.clearValidate('isHot')
    formRef.value.clearValidate('movieLength')
    formRef.value.clearValidate('name')
    formRef.value.clearValidate('photo')
    formRef.value.clearValidate('price')
    formRef.value.clearValidate('time')
    formRef.value.clearValidate('type')
  })
}
//保存按钮的回调
const save = async () => {
  //点击保存按钮的时候,务必需要保证表单全部复合条件在去发请求
  await formRef.value.validate()
  userParams.value.isHot = userParams.value.isHot ? 1 : 0
  userParams.value.isBanner = userParams.value.isBanner ? 1 : 0
  userParams.value.isExist = userParams.value.isExist ? 1 : 0
  userParams.value.time = ''
  //保存按钮:添加新的用户|更新已有的用户账号信息
  let result: any = await reqAddOrUpdateFilm(userParams.value)
  //添加或者更新成功
  if (result.code == 1) {
    //关闭抽屉
    drawer.value = false
    //提示消息
    ElMessage({
      type: 'success',
      message: userParams.value.id ? '更新成功' : '添加成功',
    })
    //获取最新的全部账号的信息
    // getHasUser(userParams.id ? pageNo.value : 1);
    //浏览器自动刷新一次
    // window.location.reload()
  } else {
    //关闭抽屉
    drawer.value = false
    //提示消息
    ElMessage({
      type: 'error',
      message: userParams.value.id ? '更新失败' : '添加失败',
    })
  }
}
//取消按钮的回调
const cancel = () => {
  //关闭抽屉
  drawer.value = false
}
//校验用户名字回调函数
const validatorUsername = (rule: any, value: any, callBack: any) => {
  //用户名字|昵称,长度至少五位
  if (value.trim().length >= 5) {
    callBack()
  } else {
    callBack(new Error('用户名字至少五位'))
  }
}
const validatorPassword = (rule: any, value: any, callBack: any) => {
  //用户名字|昵称,长度至少五位
  if (value.trim().length >= 6) {
    callBack()
  } else {
    callBack(new Error('用户密码至少六位'))
  }
}
const validatorPhone = (rule: any, value: any, callBack: any) => {
  //用户手机号码至少十一位
  if (value.trim().length >= 11) {
    callBack()
  } else {
    callBack(new Error('用户手机号码至少十一位'))
  }
}
//表单校验的规则对象
const rules = {
  //用户名字
  login: [{ required: true, trigger: 'blur', validator: validatorUsername }],
  //用户昵称
  name: [{ required: true, trigger: 'blur' }],
  //用户的密码
  password: [{ required: true, trigger: 'blur', validator: validatorPassword }],
  //用户的地址
  address: [{ required: true, trigger: 'blur' }],
  //用户的年龄
  age: [{ required: true, trigger: 'blur' }],
  //用户的性别
  sex: [{ required: true, trigger: 'blur' }],
  //用户的手机号
  phone: [{ required: true, trigger: 'blur', validator: validatorPhone }],
}

//下架某一个电影
const deleteUser = async (moiveId: number) => {
  let result: any = await reqRemoveMovie(moiveId)
  if (result.code == 1) {
    ElMessage({ type: 'success', message: '下架成功' })
    await getHasUser(FilmArr.value.length > 1 ? pageNo.value : pageNo.value - 1)
  }
}
const updateFilmIsExist = async (id: number) => {
  let result: any = await RequpdateFilmIsExist(id)
  if (result.code == 1) {
    ElMessage({ type: 'success', message: '上架成功' })
    await getHasUser(FilmArr.value.length > 1 ? pageNo.value : pageNo.value - 1)
  }
}
//批量删除按钮的回调
const deleteSelectUser = async () => {
  //整理批量删除的参数
  let idsList: any = selectIdArr.value.map((item) => {
    return item.id
  })
  //批量删除的请求
  let result: any = await reqSelectUser(idsList)
  if (result.code == 200) {
    ElMessage({ type: 'success', message: '下架成功' })
    await getHasUser(FilmArr.value.length > 1 ? pageNo.value : pageNo.value - 1)
  }
}

//搜索按钮的回调
const search = () => {
  //根据关键字获取相应的用户数据
  getHasUser()
  //清空关键字
  keyword.value = ''
}
//重置按钮
const reset = () => {
  settingStore.refresh = !settingStore.refresh
}
</script>

<style scoped>
/* 容器样式 */
.film-info-container {
  position: relative;
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden;
}

/* 装饰元素 */
.decoration-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  z-index: 0;
}

.decoration-circle-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
  top: -100px;
  right: -100px;
  filter: blur(30px);
}

.decoration-circle-2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #fa709a 0%, #fee140 100%);
  bottom: 10%;
  left: -50px;
  filter: blur(20px);
}

.decoration-circle-3 {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #30cfd0 0%, #330867 100%);
  top: 30%;
  right: 10%;
  filter: blur(15px);
}

/* 卡片样式 */
.search-card,
.action-card,
.film-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1;
  position: relative;
}

.search-card {
  margin-bottom: 20px;
}

.action-card {
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  gap: 10px;
}

/* 表单样式 */
.form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 电影网格布局 */
.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

/* 电影卡片样式 */
.film-card {
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.film-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.film-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.film-title {
  font-weight: bold;
  margin: 0;
  font-size: 16px;
  color: #333;
}

.film-duration {
  color: #868686;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.film-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.film-poster-container {
  position: relative;
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.film-poster {
  width: 150px;
  height: 220px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.film-poster-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
}

.film-poster-container:hover .film-poster {
  transform: scale(1.05);
}

.film-poster-container:hover .film-poster-overlay {
  opacity: 1;
}

.film-info {
  width: 100%;
  padding: 0 10px;
}

.film-director,
.film-actors {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.film-director .el-icon,
.film-actors .el-icon {
  color: #409eff;
}

.text345 {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-size: 14px;
}

.film-actors .text345 {
  color: #909399;
}

.film-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 10px;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 抽屉样式 */
.film-drawer :deep(.el-drawer__header) {
  margin-bottom: 20px;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  color: white;
}

.drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon {
  font-size: 24px;
}

.film-form {
  padding: 0 20px;
}

.upload-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.poster-preview {
  width: 200px;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.poster-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #909399;
  gap: 10px;
}

.avatar-uploader-icon {
  font-size: 28px;
}

.switch-group {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.custom-switch {
  --el-switch-on-color: #13ce66;
  --el-switch-off-color: #ff4949;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 详情对话框样式 */
.film-detail-dialog :deep(.el-dialog__header) {
  background: linear-gradient(to right, #4facfe, #00f2fe);
  color: white;
  padding: 15px 20px;
  margin-right: 0;
}

.film-detail-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: bold;
}

.film-detail-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
}

.film-detail-card {
  padding: 20px;
}

.film-detail-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.film-title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.film-name {
  color: #303133;
  margin: 0;
  font-size: 24px;
}

.film-duration {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606266;
  font-size: 16px;
}

.film-detail-content {
  display: flex;
  gap: 30px;
}

.film-poster-section {
  position: relative;
  flex-shrink: 0;
}

.film-detail-poster {
  width: 220px;
  height: 320px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.film-price {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  padding: 15px 10px 10px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.film-info-section {
  flex-grow: 1;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
}

.info-label {
  width: 120px;
  color: #606266;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.info-value {
  flex-grow: 1;
  color: #303133;
}

.film-status-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #ebeef5;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-label {
  color: #606266;
  font-weight: bold;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.5s ease-out;
}

.slide-fade-enter-from {
  transform: translateY(-20px);
  opacity: 0;
}

.slide-up-enter-active {
  transition: all 0.8s ease-out;
}

.slide-up-enter-from {
  transform: translateY(30px);
  opacity: 0;
}
</style>
